<template>
	<view class="pageBox">
		<view class="topBox">
			<u-swiper :list="swiperObj[swiperType].list" @change="swiperChange" :autoplay="false"
				:current="swiperObj[swiperType].nowIndex" indicatorStyle="right: 20px" height="100%"
				@click="swiperClick($event,swiperObj[swiperType].list)" @play="videoPlay" @end="videoEnd"
				@pause="videoPause">
				<view slot="indicator" class="indicator-num" v-if="swiperTypeShow">
					<text
						class="indicator-num__text">{{ swiperObj[swiperType].nowIndex + 1 }}/{{ swiperObj[swiperType].list.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="contentBoxF">
			<view class="swiperTypeBoxF" v-if="swiperTypeShow|| swiperObj.video.list.length>0">
				<view class="swiperTypeBox">
					<view class="swiperType" :class="{on:swiperType=='video'}" @click="swiperTypeChange('video')">视频
					</view>
					<view class="swiperType" :class="{on:swiperType=='picture'}" @click="swiperTypeChange('picture')">图片
					</view>
				</view>
			</view>
			<view class="titleBox">
				<view class="title">{{dataInfo.address}}</view>
				<view class="text"></view>
				<view class="priceText">{{dataInfo.rent}}/月</view>
			</view>
			<view class="talentBox">
				<view class="title">人才折扣后金额</view>
				<view class="talentBox-content">
					<view class="talentItem" v-for="item in dataInfo.talent" :key="item">
						{{item}}
					</view>
				</view>
			</view>
			<view class="addressBox">
				<view class="addressItem">
					<view class="title">{{ dicts.house_type[dataInfo.capacity]}}</view>
					<view class="text">户型</view>
				</view>
				<view class="addressItem">
					<view class="title">{{dataInfo.squareMeter}}m²</view>
					<view class="text">面积</view>
				</view>
				<view class="addressItem">
					<view class="title">{{ dataInfo.floors}}</view>
					<view class="text">楼层</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="submitBtn" @click="modalOpen">去申请</view>
		</view>
		<u-modal class="modalClass" :show="show" :zoom="false" :showConfirmButton="false">
			<view class="modalBox">
				<view class="titleBox">
					<view class="title">入住申请</view>
					<view class="closeBtn" @click="closeModal">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="modalRow">
						<view class="w50">
							<view class="rowTitle">申请人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="w50">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<view class="modalRow">
						<view class="w100">
							<view class="rowTitle">身份证号</view>
							<view class="rowText">{{userInfo.idCard}}</view>
						</view>
					</view>
					<view class="modalRow">
						<view class="w100">
							<view class="rowTitle">人才类型</view>
							<view class="rowText">{{eliteInfo.eliteType}}类</view>
						</view>
					</view>
					<u--form :model="formData" ref="uForm" :rules="rules" labelWidth="80">
						<!-- <u-form-item ref="" label="小区" prop="houseId" required>
							<view class="inputView u--border u--input u-border u-input"
								@click="openPicker(houseList,'houseId','title')">
								<text v-if="!formData.houseId" class="placeholder">请选择小区</text>
								<text v-else>{{formData['houseIdLabel']}}</text>
							</view>
						</u-form-item>
						<u-form-item ref="" label="楼栋" prop="buildingId" v-if="formData.houseId" required>
							<view class="inputView u--border u--input u-border u-input"
								@click="openPicker(buildingList,'buildingId','buildingName')">
								<text v-if="!formData.buildingId" class="placeholder">请选择楼栋</text>
								<text v-else>{{formData['buildingIdLabel']}}</text>
							</view>
						</u-form-item>
						<u-form-item ref="" label="房号" prop="apartmentId" v-if="formData.buildingId" required>
							<view class="inputView u--border u--input u-border u-input"
								@click="openPicker(apartmentList,'apartmentId','roomNumber')">
								<text v-if="!formData.apartmentId" class="placeholder">请选择房号</text>
								<text v-else>{{formData['apartmentIdLabel']}}</text>
							</view>
						</u-form-item>
						<u-form-item ref="" label="租赁时间" prop="applicationDate" required>
							<view class="inputView u--border u--input u-border u-input"
								@click="openDatetime('applicationDate')">
								<text v-if="!formData.applicationDate" class="placeholder">请选择租赁时间</text>
								<text v-else>{{dateFormat(formData.applicationDate)}}</text>
							</view>
						</u-form-item> -->
						<u-form-item ref="" label="住户数量" prop="households" required>
							<u--input type="number" v-model="formData.households" placeholder="请输入住户数量"></u--input>
						</u-form-item>
						<view class="btn" @click="submit">立即申请</view>
					</u--form>
				</view>
			</view>
		</u-modal>
		<u-picker :show="pickerShow" :columns="pickerData" :keyName="keyName" @confirm="pickerConfirm"
			@close="pickerClose" @cancel="pickerClose"></u-picker>
		<u-datetime-picker :minDate="-4607395543000" ref="datetimePicker" :show="datetimeShow" v-model="datetimeValue"
			mode="date" @confirm="datetimeConfirm" @close="closePicker('datetimeShow')"
			@cancel="closePicker('datetimeShow')"></u-datetime-picker>
		<u-modal class="rzShow" :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton
			cancelText="取消" @confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
	</view>
</template>

<script>
	import * as util from "@/utils/util.js";
	import * as roomApi from "@/api/room.js"
	import * as applicationsApi from "@/api/applications.js"
	import * as buildingApi from "@/api/building.js"
	import * as apartmentApi from "@/api/apartment.js"
	import * as systemApi from '@/api/system.js'
	import {
		applications
	} from "@/api/autth"
	export default {
		data() {
			return {
				swiperTypeShow: true,
				swiperType: 'video',
				swiperObj: {
					video: {
						nowIndex: 0,
						list: []
					},
					picture: {
						nowIndex: 0,
						list: []
					}
				},
				list4: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					type: 'video'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通',
					type: 'image'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				rzShow: false,
				infoId: '',
				dataInfo: {
					phone: '',
					area: 0,
					bathrooms: 0,
					bedrooms: 0,
					createBy: null,
					createTime: "",
					description: "",
					fileUrl: "",
					furnished: "",
					houseId: '',
					parking: "",
					petFriendly: "",
					remark: "",
					rentalPrice: 0,
					salePrice: 0,
					shared: "",
					status: "",
					title: "",
					type: "",
					updateBy: null,
					updateTime: "",
				},
				value: 1,
				pickerData: [],
				pickerShow: false,
				datetimeShow: false,
				show: false,
				formData: {
					houseId: '',
					houseIdLabel: '',
					buildingId: '',
					buildingIdLabel: '',
					apartmentId: '',
					apartmentIdLabel: '',
					applicationDate: ''
				},
				formRuls: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				openData: '',
				bgColor: ['#D0E7FE', '#B1F7ED', '#FDE2C5', '#FDF4C5'],
				btnBGs: ['linear-gradient( 90deg, #5F96E8 0%, #1977E1 100%)',
					'linear-gradient( 90deg, #03D8AF 0%, #00A57D 100%)',
					'linear-gradient( 90deg, #F2B018 0%, #F57E01 100%)',
					'linear-gradient( 90deg, #F2B018 0%, #F57E01 100%)'
				],
				userInfo: null,
				eliteInfo: {
					eliteType: ''
				},
				pickerDataName: '',
				keyName: 'label',
				keyValue: 'houseId',

				columns: [],
				houseList: [],
				buildingList: [],
				// 公寓表格数据
				apartmentList: [],
				dicts: {
					serve_state: {},
					house_type: {}
				},
				dictList: {
					serve_state: [],
					house_type: []
				},
				openName: '',
				datetimeValue: Number(new Date()),
				rules: {
					'houseId': {
						type: 'number',
						required: true,
						message: '请选择小区',
						trigger: ['blur', 'change']
					},
					'buildingId': {
						type: 'number',
						required: true,
						message: '请选择楼栋',
						trigger: ['blur', 'change']
					},
					'apartmentId': {
						type: 'number',
						required: true,
						message: '请选择房号',
						trigger: ['blur', 'change']
					},
					'applicationDate': {
						type: 'number',
						required: true,
						message: '请选择租赁时间',
						trigger: ['blur', 'change']
					},
					'households': {
						type: 'number',
						required: true,
						message: '请输入住户数量',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(options) {
			console.log(options);
			this.infoId = options.apartmentId
			this.getInfo()
			this.getDictDataList('house_type')
			// this.getHouseList()

		},
		onShow() {
			this.userInfo = this.$store.getters.my_userInfo
			this.eliteInfo = this.$store.getters.eliteInfo
			if (!this.userInfo || !this.eliteInfo) {
				this.$store.dispatch('userBaseInfo').then(res => {
					this.userInfo = res.user
					this.eliteInfo = res.eliteInfo
				})
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperObj[this.swiperType].nowIndex = e.current
				console.log(e, this.swiperObj);
			},
			swiperTypeChange(type) {
				this.swiperType = type
				console.log(type, this.swiperObj[type].nowIndex);
				// this.swiperObj[swiperType].nowIndex 
			},
			swiperClick(e, list) {
				if (this.swiperType == 'picture') {
					this.onPreviewImage(list, e)
				}
			},
			videoPlay() {
				this.swiperTypeShow = false
			},
			videoEnd() {
				this.swiperTypeShow = true
			},
			videoPause() {
				this.swiperTypeShow = true
			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},

			// 预览图片
			onPreviewImage(list, index) {
				uni.previewImage({
					// 先filter找出为图片的item，再返回filter结果中的图片url
					urls: list.map((item) => item.url),
					current: index,
					fail() {
						uni.$u.toast('预览图片失败')
					},
				});
			},
			onPreviewVideo(event) {
				if (!this.data.previewFullImage) return;
				const {
					index
				} = event.currentTarget.dataset;
				const {
					lists
				} = this.data;
				wx.previewMedia({
					sources: lists
						.filter((item) => isVideoFile(item))
						.map((item) =>
							Object.assign(Object.assign({}, item), {
								type: 'video'
							})
						),
					current: index,
					fail() {
						uni.$u.toast('预览视频失败')
					},
				});
			},
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)
			},
			RZX() {
				this.rzShow = false
			},
			authTip() {
				applications().then(res => {
					// uni.showToast({
					// 	mask: true,
					// 	title: '无权限'
					// })
					return res.data
				})
			},
			submit() {
				const that = this
				const {
					houseId,
					buildingId,
					apartmentId,
				} = this.dataInfo
				const formData = JSON.parse(JSON.stringify(that.formData))
				// formData.applicationDate = this.dateFormat(formData.applicationDate)
				formData.households = Math.ceil(formData.households)
				formData.houseId = houseId
				formData.buildingId = buildingId
				formData.apartmentId = apartmentId
				that.$refs.uForm.validate().then(res => {
					that.addSubmit(formData)
				}).catch(errors => {
					console.log(errors);
				})
			},
			closePicker(showName) {
				this[showName] = false
				this.openName = ''
			},
			dateFormat(time, format = "YYYY-mm-dd") {
				return util.dateFormat(time, format)
			},
			openDatetime(name) {
				this.datetimeShow = true
				this.openName = name
			},
			datetimeConfirm({
				mode,
				value
			}) {
				const openName = this.openName
				// this.$set(this.formData, openName, value)
				this.formData[openName] = value
				this.datetimeShow = false
				console.log(this.formData[openName]);
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			/** 查询房源列表 */
			getApartmentList() {
				const params = {
					houseId: this.formData.houseId,
					buildingId: this.formData.buildingId,
					availability: 'N'
				}
				apartmentApi.apartmentList(params).then((res) => {
					this.apartmentList = res.rows
				})
			},
			/** 查询楼栋列表 */
			getBuildingList(houseId) {
				buildingApi.buildingList({
					houseId
				}).then((res) => {
					this.buildingList = res.rows
				})
			},
			/** 查询小区列表 */
			getHouseList() {
				roomApi.houseList().then((res) => {
					this.houseList = res.rows
				})
			},

			openPicker(data, name, keyName = 'title') {
				this.keyName = keyName
				this.pickerData = [data]
				this.pickerShow = true
				this.pickerDataName = name
			},
			getInfo() {
				apartmentApi.apartmentId(this.infoId).then(res => {
					console.log(res);
					// if (typeof(res.data.fromJson) == 'string') {
					// 	res.data.fromJson = JSON.parse(res.data.fromJson)
					// }
					this.dataInfo = res.data
					this.dataInfo.talent = res.data.talent.split(' ').splice(1)
					if (res.data.video) {
						this.swiperObj.video.list = res.data.video.split(',').map(item => {
							const len = item.split('/').length
							const name = item.split('/')[len - 1]
							return {
								url: item,
								title: name,
								type: 'video',
							}
						})
					} else {
						this.swiperObj.video.list = []
						this.swiperType = 'picture'
						this.swiperTypeShow = false
					}
					if (res.data.picture) {
						this.swiperObj.picture.list = res.data.picture.split(',').map(item => {
							const len = item.split('/').length
							const name = item.split('/')[len - 1]
							return {
								url: item,
								title: name,
							}
						})
					} else {
						this.swiperObj.picture.list = []
					}
					console.log(this.dataInfo.talent);
				})
			},
			// pickerConfirm(value) {
			// 	console.log(value);
			// 	const openData = this.openData
			// 	this.openData = value
			// 	this.pickerShow = false
			// },
			// pickerClose() {
			// 	this.pickerShow = false
			// },
			pickerConfirm({
				value
			}) {
				const pickerDataName = this.pickerDataName
				console.log(value[0], pickerDataName);
				this.pickerShow = false
				this.formData[pickerDataName + 'Label'] = value[0][this.keyName]
				this.formData[pickerDataName] = value[0][this.pickerDataName]
				if (pickerDataName == 'houseId') {
					this.getBuildingList(value[0].houseId)
				} else if (pickerDataName == 'buildingId') {
					this.getApartmentList()
				}
			},
			pickerClose() {
				this.pickerShow = false
				this.pickerDataName = ''
			},
			pickerCancel() {
				this.pickerShow = false
				this.pickerDataName = ''
			},
			change(e) {
				console.log("e:", e);
			},

			addSubmit(formData) {
				// const dataObj = {
				// 	houseId: this.infoId,
				// 	information: JSON.stringify(formJson)
				// }
				uni.$u.throttle(applicationsApi.addapplications(formData).then(res => {
					this.$toast('申请成功')
					this.closeModal()
				}), 500)
			},
			closeModal() {
				this.show = false
				let formData = this.formData
				let formRuls = this.formRuls
				for (let key in formData) {
					console.log(key);
					formData[key] = ''
				}
				for (let key in formRuls) {
					formRuls[key] = ''
				}
			},
			modalOpen() {
				applications().then(res => {
					if (res.data) {
						const that = this
						that.show = true
					}
				}).catch(err => {
					if (!err.data && this.userInfo.userType == 'yk') {
						this.rzShow = true
					} else {
						this.$toast('无权限')
					}
				})

				// that.$nextTick(() => {
				// 	that.$refs.formRef.initData(this.dataInfo.fromJson)
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/components/dynamicForms/dynamicForms.scss";

	.w50 {
		width: 50%;
		box-sizing: border-box;
	}

	.w100 {
		width: 100%;
		box-sizing: border-box;
	}

	/deep/ .u-modal__content {
		padding: 30rpx 0 0 0 !important;
	}

	.modalClass {
		/deep/ .u-transition {
			z-index: 10069 !important;
		}

	}

	.rzShow {
		/deep/ .u-modal__content {
			padding: 30rpx !important;
		}

	}

	.pageBox {
		.topBox {
			height: 450rpx;
			position: relative;


			.indicator-num {
				padding: 12rpx 30rpx;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				color: #FFF;
				font-size: 26rpx;

				.indicator-num__text {}
			}
		}

		.blue {
			color: #1145D5;
		}



		.contentBoxF {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;
			z-index: 2;

			.swiperTypeBoxF {
				position: absolute;
				top: 0rpx;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				width: 100%;

				.swiperTypeBox {
					margin: auto;
					background: rgba(0, 0, 0, 0.6);
					display: flex;
					align-items: flex-start;
					justify-content: center;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					position: relative;
					z-index: 22;
					position: absolute;
					top: -80rpx;
					height: 60rpx;

					.swiperType {
						padding: 0rpx 30rpx;
						height: 60rpx;
						color: rgba(255, 255, 255, 0.6);
						text-align: center;
						display: inline-block;
						vertical-align: top;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&.on {
							color: #fff;
							background: transparent;
						}
					}
				}
			}

			.titleBox {
				border: 2rpx solid #F3F3F3;
				padding: 30rpx;
				box-sizing: border-box;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
					margin: 24rpx 0;
				}

				.priceText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #DD2910;
				}
			}

			.talentBox {
				border: 2rpx solid #F3F3F3;
				padding: 30rpx;
				box-sizing: border-box;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
				}

				.talentBox-content {
					display: flex;
					flex-wrap: wrap;

					.talentItem {
						width: 33.333%;
						box-sizing: border-box;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						margin-top: 24rpx;
					}
				}
			}

			.addressBox {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 30rpx;

				.addressItem {
					width: 33.333%;
					box-sizing: border-box;
					text-align: center;
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #DD2910;
					margin-bottom: 20rpx;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
				}
			}
		}


		.btnBox {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 124rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			width: 100%;
			z-index: 2;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.submitBtn {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				height: 76rpx;
				background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}
		}



		.modalBox {
			width: 100%;
			padding-bottom: 40rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #F1EEEE;
				margin: 0 30rpx;

				.title {
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}

				.closeBtn {
					flex-shrink: 0;
				}
			}

			.modalContentBox {
				padding: 0 30rpx;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 76rpx;
					background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 40rpx;
				}

				.modalRow {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30rpx;

					&:first-of-type {
						margin-top: 30rpx;
					}
				}

				.modalRowTip {
					display: flex;
					align-items: center;
					height: 40rpx;
					color: #F00000;
					font-size: 24rpx;
					padding-left: 150rpx;

				}

				.modalInputRow {
					display: flex;
					align-items: center;

					.label {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						width: 138rpx;
						flex-shrink: 0;
					}

					.inputBox {
						width: 100%;
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 2rpx solid #DADADA;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						&.err {
							border-color: #F00000;
						}

						.inputSuffix {
							padding-right: 20rpx;
							flex-shrink: 0;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #979797;
						}

						.input {
							padding: 0 20rpx;
							width: 100%;
							height: 98%;
						}
					}
				}

				.rowTitle {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
					margin-bottom: 10rpx;
				}

				.rowText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}


	}
</style>